<template>
  <div class="home">
    <h1>HomeView</h1>
    <p>homeViewNum：{{ homeViewNum }}</p>
    <AddButton @clickAddButton="addHelloWorldNum" text="点击 num++"></AddButton>
    <HelloWorld msg="HelloWorld" ref="HelloWorld" @setHomeViewNum="setHomeViewNum" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue'

@Component({
  components: {
    HelloWorld,
  },
})

export default class HomeView extends Vue {
  @Ref() helloWorld!: any
  addHelloWorldNum() {
    // (this.$refs.HelloWorld as HelloWorld).num += 1
    (this.$refs.HelloWorld as any).addNum()
  }
  homeViewNum = 0
  setHomeViewNum(num: number) {
    this.homeViewNum = num
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 10px;
  border: 2px solid black;
}
</style>